

<template>
    <div class="mask" v-if="showSearch" @touchmove="changeMove">
		<div class="search-leader">
            <i class="icon-search"></i><input placeholder="搜索" v-model="name" type="text"  class="search-input"><span @click="cancel" class="color-search">取消</span>
        </div>
        <!--@input="SearchName"-->
        <v-scroll :on-refresh="onRefresh" :topFixed="top" :on-infinite="onInfinite" :top="top" :dataList.sync="scrollData">
            <div >
                <div class="leader-info" v-for="(info,index) in dataList" :class="{'disabled':!info.pay && !info.personnel }"  @click.stop="handleSelect(index,info,info.pay,info.personnel)" :key="info.id">
                    <div class="pic">
                    <img :src="handleImg(info)" alt="" />
                    </div>
                    <div class="info-container">	
                    <div class="basic-info ellipsis">
                        <h2 >{{info.name}}</h2>
                    
                    </div>
                    <div class="posi-info">
                        <span>{{info.c_current_job}}</span>
                    </div>
                    </div>
                </div>
            </div>

        </v-scroll>
        <!--<div class="leader-info" v-for="(info,index) in dataList" @click.stop="handleSelect(index,info.emplid)" :key="info.id">
			<div class="pic">
				<img :src="handleImg(info)" alt="" />
			</div>
			<div class="info-container">	
				<div class="basic-info ellipsis">
					<h2 >{{info.name}}</h2>
				</div>
				<div class="posi-info ellipsis">
					<span>{{info.position_desc}}</span>
				</div>
			</div>
		</div>-->
    </div>
</template>
<script>
import Vue from 'vue'
import {Toast} from 'mint-ui'
import { Spinner } from 'mint-ui';

Vue.component(Spinner.name, Spinner);
import Bus from '@/common/js/vueBus'
import pullRefresh from "@/components/public/components/index"
export default {
  data(){
      return{
        value:"",
        checked:0,
        show:false,
        scrollTop:0,
        name:'',
        scrollData:{
            noFlag: false //暂无更多数据显示
        },
        top:'1rem',
      }
  },
  computed:{

  },
  props:{
    showSearch:{
        type:Boolean,
        default:false
    },
    dataList:{
        type:Array
    },
    isEnd:{
        type:Boolean,
        default:false
    },
    pageNum:{
        type : Number,
        default:1
    },
    type:{
        type:String,
        default:'employee'
    }
  },
  watch:{
    showMask:function(newVal){
        if (newVal) {
            var self = this;
            console.log('scroll');
            Vue.nextTick(function(){
                console.log(self.$refs.optCont);
                self.$refs.optCont.scrollTop = self.scrollTop;
            })
        }


    },
    name:function(newVal,oldVal){
        this.SearchName();
    },
    isEnd:function(newVal,oldVal){
        if (newVal) {
            this.isLoadMore();
        }
    }
  },
  components:{
    'v-scroll':pullRefresh
  },
  mounted:function(){
      var self = this;
      console.log(this.dataList,'dataList')
  },
  methods:{
      changeMove:function(e){
          console.log(e);
          e.stopPropagation();

      },
      scroll:function(){
          console.log('scroll');
      },
      handleClick:function(index,val,label){
        var self = this;
        self.checked = index;
        setTimeout(function(){
            self.$emit("update:showMask",false);
            self.$emit('returnChecked',val,label)
        },100)
        self.scrollTop = self.$refs.optCont.scrollTop;
      },
      onRefresh(done) {

            
            this.SearchName();
            done(); // call done
      },
      onInfinite(done) {
            if (this.isEnd) {
                this.isLoadMore();
                done();
                return;
            }
            this.$emit("update:pageNum",this.pageNum+1);
            
            Vue.nextTick(()=>{
                this.SearchName('more');  
                this.isLoadMore();   
                done();              
            })


            
      },
      isLoadMore:function(){
            let more = this.$el.querySelector('.load-more');
            if(this.isEnd) {
                more.style.display = 'none'; //隐藏加载条
                //走完数据调用方法
                this.scrollData.noFlag = true;
            } else {
                more.style.display = 'none'; //隐藏加载条
            }
      },

      SearchName:function(val){
          console.log(this.name,"searchName");
          this.$emit("searchName",this.name,val)
      },
      handleSelect:function(index,info,pay,personnel){
          
          if (!pay && !personnel) {
				Toast({
				message: '您无权限访问此人详细信息',
				position: 'center',
				className:'toastStyle',
				duration: 2000
				});
				return;  
		  }
          Bus.$emit('showPanel');           


		  localStorage.setItem('leader_pay',pay);
		  localStorage.setItem('leader_person',personnel);
          localStorage.setItem('leader_em',info.emplid);
		//   localStorage.setItem('leader_pay',pay);
		//   localStorage.setItem('leader_person',personnel);
        //   localStorage.setItem('leader_em',info.emplid);
		//   location.href = '/module/confirmTable.html?emplid='+this.info.emplid;


		//   location.href = '/module/confirmTable.html';
      },
      handleImg : function(info){
            return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + info.emplid + '&sex=' +(info.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token');
      },
      cancel:function(){
          this.scrollData.noFlag = false;
          this.name = '';
          this.$emit("update:showSearch",false);
          this.$emit("update:dataList",[]);
          this.$emit("update:pageNum",1);
          this.$emit("update:isEnd",false);
      }
  }
}
</script>
<style scoped>
.mask{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
	overflow-y: auto;
    background-color: rgba(255, 255, 255, 1);
    z-index:2500;
}
.leader-info .info-container .basic-info>h2{
	display:inline-block;
	font-size:0.36rem;
    line-height: 0.44rem;
    height: 0.44rem;
}
.disabled{
    background-color:#FDFDFD;
}

.leader-info .info-container .basic-info .sex{
	color:#888;
}
.leader-info .info-container .basic-info{
	margin-top:0.02rem;

}
.leader-info .info-container .posi-info{
	font-size:0.32rem;
    height: 0.42rem;
    line-height: 0.42rem;
}
.leader-info .ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.leader-info{
	padding-left:0.3rem;
	padding-top:0.14rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.14rem;    
}
.leader-info>div{	
	display:inline-block;
}
.leader-info .info-container{
	padding-left:0.1rem;
	max-width: 6rem;
}
.pic{
	vertical-align: top;
	width:0.92rem;
	height:0.92rem;
}
.pic img{
	width:0.92rem;
	height:0.92rem;
	border-radius:50%;
}


.search-input{
    width: 70%;
    border:none;
    display: inline-block;
    margin-left:0.2rem;
    padding: 0;
    font-size: 0.32rem;
    height:0.96rem;
    background-color:transparent;
}
.search-input:focus {
    outline: none;
}
.search-input::-webkit-input-placeholder {
    color: #888;
    font-size: 0.32rem;
}
.mask .search-leader{
  font-size:0.32rem;
  line-height:3;
  position:fixed;
  top:0;
  z-index:1000;
  background-color: #fff;
  width:100%;
  border-bottom:1px solid #ccc;
}
.color-search,.icon-search:before{
    color:#26a2ff
}
.icon-search{
    margin-top: 0.32rem;
    float: left;
}

.icon-search,.color-search{
    margin-left:0.4rem;
}

</style>

             
             
             
             
